<template>
	<om-page :title="pageTitle" class="om-font-size">
		<view v-show="ischartList">
			<view class="tui-nomore-class tui-loadmore-none">
				<view class="tui-nomore">
					<view class="tui-nomore-text" style="background: rgb(250, 250, 250);"></view>
				</view>
			</view>
		</view>
		<view v-show="chartList.length>0">
			<uni-list-item :showArrow="false" v-for="(item,index) in chartList" :key="index">
				<!-- <view class="cu-bar bg-white">
					<view class="action" style="font-size: 16px; margin-left: 0;">
						<text class="title-Icon"><span></span></text>
						<text class="margin-left"><span>{{item.title}}</span></text>
					</view>
				</view> -->
				<view class="chart-top">
					<view class="chart-people">
						<view>指标名称：{{ item.title }}</view>
						<view>指标范围：{{ item.busRange }}</view>
						<view>承担人：{{ item.dutyUserName }}</view>
					</view>
					<view class="chart-type">
						<om-combox style="font-size: 10px;" :status="false" label="" labelWidth="100px" @changeValue="changeIndex(arguments,item)"
						 :candidates="item.listTitle" placeholder="请选择图表类型"></om-combox>
					</view>
				</view>
				<text style="font-size: 10px; margin-top: 64px;">{{item.yname.substring(item.yname.indexOf('（'),item.yname.length) }}
					<!-- <text style="margin-left: 40px;">{{item.title}}</text> -->
				</text>
				<view class="chart-cont">
					<view class="chart-tb">
						<om-ucharts :chartType="item.type" :opts="item" :canvasId="'canvas'+index"></om-ucharts>
					</view>
					<view class="chart-tx"><view class="desc">{{item.xname}}</view></view>
				</view>
				<!-- <view style="font-size: 10px;">{{item.xname}}</view>
				<om-ucharts :chartType="item.type" :opts="item" :canvasId="'canvas'+index"></om-ucharts> -->
			</uni-list-item>
		</view>
	</om-page>
</template>

<script>
	export default {
		data() {
			return {
				pageTitle: '指标图表',
				chartList: [],
				ischartList: false,
			};
		},
		methods: {
			changeIndex(info, item) {
				this.$set(item, "type", item.listValue[info[1]])
			},
		},
		onLoad(data) {
			let _that = this;
			_that.om.request("annualPlanChart/getIndexEchart",{
				posId: data.posId,
				year: data.year,
				indexId: data.indexId,
			},'post').then(res=>{
				// let arr = []
				// for (let index in res.value) {
				// 	let obj = {
				// 		categories: [],
				// 		series: [],
				// 		title: "",
				// 		type: 'line'
				// 	}
				// 	obj.categories = res.value[index].xAxis.data
				// 	obj.series = res.value[index].series
				// 	obj.title = res.value[index].title
				// 	obj.name = res.value[index].yAxis.name
				// 	obj.listTitle = ["折线图", "柱状图"]
				// 	obj.listValue = ["line", "column"]
				// 	arr.push(obj)
				// }
				
				// _that.chartList = arr
				
				let arr = []
				if(res.value.id){
					let obj = {
						categories: [],
						series: [],
						title: "",
						type: 'line'
					}
					obj.categories = res.value.xAxis.data
					obj.series = res.value.series
					obj.title = res.value.title
					obj.yname = res.value.yAxis.name
					obj.xname = res.value.xAxis.name
					obj.listTitle = ["折线图", "柱状图", "累计图"]
					obj.listValue = ["line", "column", "cumulative"]
					obj.busRange = res.value.map.userName.indexCategoryName
					obj.dutyUserName = res.value.map.userName.userName
					obj.nowYear = data.year
					arr.push(obj)
				}
				
				_that.chartList = arr
				if(arr.length == 0){
					_that.ischartList = true
				}
			})
		},
	};
</script>

<style>
	.tui-nomore::after {
		content: '没有图表';
	}
	.chart-cont{
		display: flex;
	}
	.chart-tb{
		flex: 1;
	}
	.chart-tx{
		font-size: 10px;
		width: 12px;
		position: relative;
	}
	.chart-tx .desc{
		position: absolute;
		bottom: 50px;
	}
	.title-Icon{
		width: 6px;
		height: 18px;
		border-radius: 3px;
		margin-left: 3px;
		background-color: #39B54A;
	}
	.chart-top{
		position: absolute;
		top: 5px;
		width: 100%;
		display: flex;
	}
	.chart-people{
		flex: 1;
		line-height: 16px;
		font-size: 12px;
	}
	.chart-type{
		height: 34px;
		width:105px;
		border-bottom: 1px solid #1890FF;
		margin: 13px 20px 0 0;
	}
</style>                                                  
